<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Barlow:400,500,700|Playfair+Display" rel="stylesheet">
  <th:block th:include="include :: header('风险预判')" />
  <style>
    html,body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    #echartPanel {
      margin: 0 auto;
      width: 100%;
      height: 100%;
    }
    .title{
      position: absolute;
      top: 60px;
      left: 100px;
      z-index: 999
    }
    .title h2{
      color: #FFF;
    }
    .link{
      position: absolute;
      top: 115px;
      left: 100px;
      z-index: 999
    }
    .link a{
      display: block;
      color: #ccc;
    }
    .link a:hover{
      display: block;
      color: #FFF;
    }
    .back{
      position: absolute;
      z-index: 999;
      top: 10px;
      left: 10px;
      font-size: 14px;
      color: #ccc;
    }
  </style>
</head>
<body>

<div id="echartPanel" class="panel" style="position: relative">
  <div class="title">
    <h2 th:if="${type == 'taifengbaoyu'}">台风暴雨事件知识图谱</h2>
    <h2 th:if="${type == 'xiaofangshijian'}">消防事件知识图谱</h2>
    <h2 th:if="${type == 'zhianshijian'}">治安事件知识图谱</h2>
  </div>

  <div class="link">
    <a href="taifengbaoyu" class="btn-link" th:if="${type != 'taifengbaoyu'}">台风暴雨事件知识图谱</a>
    <a href="xiaofangshijian" class="btn-link" th:if="${type != 'xiaofangshijian'}">消防事件知识图谱</a>
    <a href="zhianshijian" class="btn-link" th:if="${type != 'zhianshijian'}">治安事件知识图谱</a>
  </div>

  <div class="back">
    <a href="https://www.uj345.com/hqyj/#/">返回</a>
  </div>

  <div class="" style="height: 100%">
    <p id="error-msg" style="display: none"></p>
    <div id="echartDiv" style="height: 100%"></div>
  </div>
</div>

</body>
</html>

<script th:src="@{../static/plugins/pace/js/pace.min.js}"></script>
<script th:src="@{../static/js/jquery-2.2.4.min.js}"></script>
<script th:src="@{../static/js/bootstrap.min.js}"></script>
<script th:src="@{../static/js/nifty.min.js}"></script>
<script th:src="@{../static/plugins/jquery-validation/1.15.0/jquery.validate.min.js}"></script>
<script th:src="@{../static/js/core/app-common.js}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{../static/plugins/echart/echarts.min.js}"></script>

<script th:inline="javascript">

  var type = [[${type}]];

  $(function(){
    initEchart();
  });

  function initEchart(){
    var chartDom = document.getElementById('echartDiv');
    var myChart = echarts.init(chartDom);
    var option;
    myChart.showLoading();
    // __ajax_get("https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/flare.json", {}, function(data){
    __ajax_get("/risk/data/"+type, {}, function(data){
      myChart.hideLoading();
      if(data.code === 200){
        myChart.setOption(option = {
          backgroundColor: '#2c343c',
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
          },
          series: [
            {
              type: 'tree',
              data: [data.data],
              top: '18%',
              bottom: '14%',
              layout: 'radial',
              symbol: 'emptyCircle',
              symbolSize: 7,
              initialTreeDepth: 3,
              animationDurationUpdate: 750,
              emphasis: {
                focus: 'descendant'
              }
            }
          ]
        });
      }else{
        $("#error-msg").show();
        $("#error-msg").text(data.msg);
        __toastr_error(data.msg)
      }
    })
  }

</script>